import 'package:flutter/material.dart';


class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

// 因为TabBar 的切换自带动画效果， 因此把 SingleTickerProviderStateMixin 配置上去
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {

  TabController _controller;

  @override
  void initState() {
    
    // controller是控制器，每一个 TabBar 都需要一个控制器，用来控制tabbar和页面的联动效果
    // 对控制器进行初始化，然后将控制器传递到TabBar和TabBarView当中，将二者绑定在一起
    // length: 控制的数量 vsync: TabBar动画异步操作的配置项。二者都是必填项
    _controller = TabController(length: 3, vsync: this);
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TabBar(
          controller: _controller,
          tabs: <Widget>[
            Tab(icon: Icon(Icons.directions_bike)),
            Tab(icon: Icon(Icons.directions_bus)),
            Tab(icon: Icon(Icons.directions_car)),
          ],
        ),
      ),

      body: TabBarView(
        controller: _controller,
        children: <Widget>[
          HomePage(title: 'page1'),
          HomePage(title: 'page2'),
          HomePage(title: 'page3'),
        ],
      ),
    );
  }
}


class HomePage extends StatelessWidget {
  HomePage({this.title});
  final String title;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('$title'),
    );
  }
}
